<template>
  <div class="fault-container">
    <a-tabs type="card" @change="callback">
      <a-tab-pane key="服务统计" tab="服务统计">
        <statics-service :userName="userName"></statics-service>
      </a-tab-pane>
      <a-tab-pane key="故障统计" tab="故障统计">
        <statics-fault :userName="userName"></statics-fault>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import StaticsService from './components/staticsService'
  import StaticsFault from './components/staticsFault'
  export default {
    name: "Fault",
    components: {
      StaticsService,
      StaticsFault
    },
    data () {
      return {
        userName: '',
      };
    },
    methods: {
      getLocalStorageData () {
        const phone = localStorage.getItem('phone');
        this.userName = phone;
        if (!phone) {
          this.$router.push('/');
        }
      },
      callback (key) {
      },
    },
    created () {
      this.getLocalStorageData();
    }
  }
</script>

<style scoped="scoped">
  .fault-container /deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
    margin-right: 40px !important;
    margin-left: 10px;
    font-size: 15px;
    background: #fff;
    border: none;
  }
  .fault-container /deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
    height: 40px;
    color: #fff;
    background: #1890ff;
    border-color: #e8e8e8;
    border-radius: 4px;
    border-bottom: 1px solid #fff;
  }
  .fault-container /deep/  .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container {
    height: 60px;
  }

  .fault-container /deep/ .ant-tabs-nav-scroll {
    margin-top: 10px;
  }
</style>
